<script setup lang="ts">
import { computed } from "vue"
import { ElHeader } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb.vue'
import Tag from '@/components/Tag.vue'
import { Refresh, FullScreen, Expand, Fold } from '@element-plus/icons-vue'
import { useRefreshStore } from '@/stores/refresh'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useAuthStore } from '@/stores/auth' 

import { useMenuStore } from '@/stores/menu'
import { logout } from '@/api/System.js' // 引入退出登录接口

const menuStore = useMenuStore()
const collapseIcon = computed(() => menuStore.isCollapse ? Expand : Fold)
const toggleMenu = () => {
  menuStore.toggleCollapse()
}

const authStore = useAuthStore()
const refreshStore = useRefreshStore()

const handleRefresh = () => {
  refreshStore.setRefresh()
}

const handleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

// 处理退出登录
const handleLogout = async (command: string) => {
  if (command === 'logout') {
    try {
      // 调用退出登录接口
      const res = await logout()
      if (res.code === 200) {
        // 清除 pinia 中的 sessionId
        authStore.clearSession() // 使用 clearSession 方法清空 sessionId

        // 清除 localStorage 中的 JSESSIONID
        localStorage.removeItem('JSESSIONID')
        // 清除 localStorage 中的 tagsView
        localStorage.removeItem('TagStore')

        // 提示并跳转到登录页
        ElMessage.success('退出成功')

        // 确保跳转
        router.replace('/login').then(() => {
          window.location.reload() // 强制刷新页面
        })
        
      } else {
        ElMessage.error(`退出失败：${res.message || '未知错误'}`)
      }
    } catch (error) {
      // 处理请求异常
      ElMessage.error('网络错误，请稍后重试')
    }
  }
}
</script>

<template>
    <el-header>
      <div class="breadcrumb-tag-box">
        <div class="toggle-box">
          <el-button :icon="collapseIcon" text @click="toggleMenu"  style="font-size: 22px;"/>
        </div>
        <div class="tag-box">
          <Breadcrumb class="breadcrumb"></Breadcrumb>
          <Tag></Tag>
        </div>
      </div>
      <div class="btn-box">
        <el-button :icon="Refresh" circle @click="handleRefresh" />

        <el-button :icon="FullScreen" circle @click="handleFullScreen" />
        <el-dropdown @command="handleLogout">
          <span class="el-dropdown-link">
            <img src="@/assets/images/avatar.png" alt="" class="avatar" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
</template>

<style lang="less">
.el-header {
  width: 100%;
  position: relative;
  height: 85px;
  box-sizing: border-box;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  // background-color: var(--el-color-primary-light-7);
  background-color: #ffffff;
  color: var(--el-text-color-primary);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 6px !important;
  .toggle-box {
    width: 35x;
    height: 100%;
    margin: 0 10px;
    display: flex;
    align-items: center;
  }
  .breadcrumb-tag-box {
    width: 85%;
    padding-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // align-items: center;
    .tag-box {
      width: 100%;
    }
  }
  .breadcrumb {
    height: 30px;
    line-height: 30px;
    padding-top: 5px;
  }
  .btn-box{
    display: flex;
    align-items: center;
  }
}
.avatar {
  width: 32px;
  height: 32px;
  margin-left: 15px;
  cursor: pointer;
}
// 去除 el-dropdown 的 outline 样式
.el-dropdown {
  .el-dropdown-link {
    outline: none;
    &:focus-visible,
    &:hover,
    &:active {
      outline: none;
    }
    // 如果你希望 img 元素也去掉 outline（例如点击时）
    img {
      outline: none;
      &:focus-visible,
      &:hover,
      &:active {
        outline: none;
      }
    }
  }
}
</style>